<script lang="ts" setup>
import { ElButton, ElTableColumn, ElTable } from "element-plus"
import Header from "@/views/content/util/header.vue"
import { onMounted, ref, computed, defineEmits } from "vue"
import { } from '@/apis/staffApi'
//组件
import Limit from "@/views/content/util/limit.vue"

const loadingItemList = ref(false)
const getLimitItemList = (displayedItemList: Array<Object>) => {
    // console.log("接收：")
    // console.log(displayedItemList)
    limitItemList.value = displayedItemList
}

const itemList = ref([])
const limitItemList = ref([])

const getItemList = async () => {
    // loadingItemList.value = true
    // const res: res = await getStaffListApi()
    // itemList.value = res.data
    // if (res.code == 0) {
    //     loadingItemList.value = false
    // }
}
onMounted(() => {
    getItemList()
})
</script>

<template>
    <div style="width: 97%;">
        <Header title="打印机日志"></Header>
        <div>
            <div  v-show="!loadingItemList"  style="margin-top: 20px">
                <el-table :data="limitItemList" :row-key="(row) => row.id"  
                    :header-cell-style="{background:'rgb(243, 243, 243)',color:'#606266'}"
                    >
                    <el-table-column type="selection"></el-table-column>
                    <el-table-column label="排序" prop="sort" width="100px"></el-table-column>
                    <el-table-column label="订单ID" prop="groupId"></el-table-column>
                    <el-table-column label="打印时间" prop="name"></el-table-column>
                    <el-table-column label="打印机型号" prop="name"></el-table-column>
                    <el-table-column label="打印机名称" prop="name"></el-table-column>
                    <el-table-column label="打印类型" prop="name"></el-table-column>
                    <el-table-column label="操作" prop="">
                        <template #default="{ row }">
                            <div class="button-container">
                                <el-button  type="primary">详情</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div v-show="loadingItemList" style="display: flex;justify-content: center;">
                <img src="@/assets/images/loading.gif" />
            </div>


            <div>
                <Limit :itemList="itemList" @updateItemList="getLimitItemList" />
            </div>
        </div>
    </div>
</template>
<style scoped>
::v-deep .el-table th>.cell {
    color: black;
}

.caozuo-button {
    width: 30px;
    height: 15px;
    font-size: 10px;
}
</style>
